<template>
	<view>
		<!-- 轮播 -->
		<u-swiper
			:list="list3"
			@change="e => current = e.current"
			:autoplay="false"
			height="320rpx"
			>
			<view
				slot="indicator"
				class="indicator">
				<view
					class="indicator__dot"
					v-for="(item, index) in list3"
					:key="index"
					:class="[index === current && 'indicator__dotActive']"
				>
			  </view>
			</view>
		</u-swiper>
		<!-- 轮播结束 -->
		<!-- 倒计时 -->
		<view class="u-demo-block__content center">
			<u-row
				justify="space-between"
				customStyle="margin-bottom: 10px"
			>
				<u-col span="3">
					<view class="demo-layout bg-purple-light">
						<text class="price">{{goodTable.price}}</text>
						<text class="text_del">￥3483</text>
					</view>
				</u-col>
				<u-col span="3">
					
					<view class="demo-layout bg-purple">
						<u-count-down
						:time="miliTime" 
						format="HH:mm:ss"
						autoStart
						millisecond
						@change="onChange"
		        >
							<view v-if="timeData.seconds === 0 && timeData.minutes === 0 && timeData.hours === 0">
								<text style="line-height:88rpx; color:#FC183F">活动已结束</text>
							</view>
							<view v-else>
								<text class="title">距结束还剩</text>
								<view class="time">
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
									</view>
									<text class="time__doc">:</text>
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}</text>
									</view>
									<text class="time__doc">:</text>
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
									</view>
								</view>
							</view>
							
					</u-count-down>
					</view>
				</u-col>
				
			</u-row>
		</view>
		<!-- 倒计时结束 -->
		<!-- 商品名称 -->
		<view class="goods_information">
			<text class="goods_name">{{goodTable.name}}</text>
			<view class="sell">
				<text>销量：{{sales}}</text>
				<text>库存：{{goodTable.stock}}</text>
			</view>
		</view>
		<!-- 商品名称结束 -->
		<!-- 规格选择 -->
		<view class="specs_selection">
			<text class="speces_title">规格选择</text>
			<view class="set_meal">
				<view v-for="(item,index) in goodTable.sku" 
				:key="index" 
				@click="changeSku(item)"
				:class="{ act: skuId == item._id }"
			>{{item.skuName}}</view>
			</view>
			<view class="line"></view>
			<text class="meal_desc" v-for="(item,index) in goodTable.sku" :key="index" v-if="skuId == item._id">{{item.skuContent}}</text>
		</view>
		<!-- 规格选择结束 -->
		<!-- 商品详情 -->
		<view class="goods_detail">
			<view class="detail_title">
				<u-tabs
				:list="title_list"
				@click="changeTabsId"
				lineWidth="134rpx"
				lineHeight="12rpx"
				lineColor="#E5B86D"
				:activeStyle="{
					color: '#161616',
					fontWeight: 'bold',
					fontSize: '30rpx',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#161616',
					fontSize:'28rpx',
					transform: 'scale(1)'
				}"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
				>
				</u-tabs>
			</view>
			<view class="">
				<view v-if="tabs_id===0" class="u-content">
					<u-parse :content="goodTable.details"></u-parse>
				</view>
				<view v-else-if="tabs_id===1">
					<u-parse :content="goodTable.mealContont"></u-parse>
				</view>
				<view v-else>
					<u-parse :content="goodTable.purchaseNotes"></u-parse>
				</view>
			</view>
		</view>
		<!-- 商品详情结束 -->
		<!-- 底部 -->
		<view class="footer">
			<view class="icon_img" vi>
				<image src="@/static/detail_img/shop.png" alt=""/>
				<text>商城</text>
			</view>
			<view class="icon_img">
				<image src="@/static/detail_img/service.png" alt=""/>
				<text>客服</text>
			</view>
			<view class="icon_img" @click="onlike = !onlike">
				<image v-if="onlike===false" src="@/static/detail_img/like.png" alt=""/>
				<image v-else src="@/static/detail_img/onlike.png" alt=""/>
				<text>收藏</text>
			</view>
			<view class="purchase" :style="{backgroundColor:stock===0 ? ' #FDBBAF' : '#FC183F'}">
				<text v-if="stock === 0">已售罄</text>
				<navigator v-else :url="'/pages/purchase/purchase?goodId='+goodTable._id+'&choseSkuId='+skuId" hover-class="navigator-hover">立即购买</navigator>
			</view>
		</view>
		<!-- 底部结束 -->
	</view>
</template>

<script>
	import { goodsDetail }from '@/api/index.js'
	export default{
		onLoad(option){
			let id = option.id
			goodsDetail(id).then(res=>{
				this.goodTable = res
				console.log("this.goodTable",this.goodTable)
				this.skuId = this.goodTable.sku[0]._id
			})
		},
		data(){
			return{
				list3: [
				  'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				  'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				  'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					],//轮播图片
				current:0,//轮播当前下标
				timeData: {}, //
				time:0.006,  //倒计时时间
				sales:690, //销量
				onlike:false,//收藏与否
				tabs_id:0,
				skuId:0,
				goodTable:null,
				title_list: [{
					name: '商品详情',
				},
				{
					name:'套餐内容',
				},
				{
					name:'购买须知',
				}],
			}
		},
		computed:{
			miliTime(){
				return this.time* 60 * 60 * 1000
			}
		},
		methods:{
			 onChange(e) {
			  this.timeData = e;
			  },
				changeTabsId(item){
					this.tabs_id = item.index
				},
				changeSku(item){
					console.log("item",item)
					this.skuId = item._id
					console.log("choseSkuId",this.skuId)
					this.goodTable.stock= item.skuStock
					this.goodTable.price= item.skuPrice
					
				}
		}
	}
</script>

<style lang="scss">
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
				 height: 6rpx;
				 width: 12rpx;
				 border-radius: 100rpx;
				 background-color: rgba(255, 255, 255, 0.35);
				 margin: 0 5rpx;
				 transition: background-color 0.3s;

				&Active { 
					background-color: #fff;
				 }
		}
	}
	.center{
		height:88rpx;
		padding-top: 2rpx;
		background-image:url("../../static/detail_img/5.png");
		background-repeat:no-repeat;
		background-size:100% 100%;
		background-position:center right;
		.title{
			color: #E73C5E;
			font-size: 24rpx;
      margin-left:20rpx;
		}
		.price{
			color: #fff;
			font-size: 34rpx;
			margin: 0 13rpx 0 28rpx;
			// line-height: 90rpx;
		}
		.text_del{
			color:#fff;
			font-size: 26rpx;
			text-decoration: line-through;
		}
	}
	.time {
	    @include flex;
	    align-items: center; 
	    &__custom {
				width: 36rpx;
				height: 36rpx;
				background-color: #FC183F;
				border-radius: 4rpx;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				justify-content: center;
				align-items: center;
				&__item {
					color: #fff;
					font-size: 24rpx;
					text-align: center;
					background-color: #FC183F; 
				 }
	    }
	    &__doc {
	      color: #FC183F;
	      padding: 0rpx 9rpx;
	     }
	    &__item {
	      color: #606266;
	      font-size: 15rpx;
	      margin-right: 4rpx; 
	     }
	}
	.goods_information{
		margin-bottom: 20rpx;
		padding:16rpx 18rpx 10rpx;
		background-color: #fff;
		.goods_name{
			font-size: 30rpx;
			color:#1F1F1F;
			line-height: 40rpx;
		}
		.sell{
			display: flex;
			justify-content: space-between;
			font-size: 22rpx;
			line-height: 50rpx; 
			color: #8C8C8C;
		}
		
	}
	.specs_selection{
		padding:10rpx 25rpx 28rpx 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		.speces_title{ 
			font-size: 24rpx;
			color: #838383; 
		}
		.set_meal{ 
			display: flex;
			flex-wrap: wrap;
			view{
				width: 176rpx;
				line-height: 62rpx;
				border: 2rpx solid #727272;
				border-radius: 4rpx;
				margin: 19rpx 31rpx 0 0; 
				text-align: center;
				color:#727272;
				font-size: 26rpx;
			}
			.act{
				width: 180rpx;
				line-height: 66rpx;
				color: #FC183F;
				border:0;
				background: url('@/static/detail_img/chose.png');

			}
		}
		.line{
			border-top: 1rpx dashed #BFBFBF;
			margin-top: 20rpx;
			margin-bottom: 25rpx;
		}
		.meal_desc{
			margin-left: 12rpx;
			color:#FC183F;
			font-size: 26rpx;
		}
	}
	.goods_detail{
		background-color: #fff;
		height: 800rpx;
		.detail_title{
			display: flex;
			justify-content: center;
		} 
	}
	.footer{
		display: flex;
		justify-content: space-around;
		position: fixed;
		padding-top: 16rpx;
		bottom: 0rpx;
		left: 0;
		width: 100%;
		height: 80rpx;
		.icon_img{
			width: 40rpx; 
			height: 100%; 
			font-size:20rpx;
			text-align: center; 
			line-height:30rpx;
			color:#848484;
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.purchase{
			width: 440rpx;
			height: 70rpx;
			margin-top: -5rpx;
			line-height: 70rpx;
			border-radius: 38px;
			text-align: center;
			font-size: 30rpx;
			color: #fff;
		}
	}
	.u-tabs__wrapper__nav__line{
		margin-bottom: 10rpx;
		z-index: 1;
	}
	.u-tabs__wrapper__nav__item__text{
		z-index: 22;
	}

</style>